import { useContext } from "react";
import { Outlet } from "react-router-dom";
import { AuthContext } from "@/contexts/authContext";
import { useTheme } from "@/hooks/useTheme";
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";

/**
 * 应用布局组件，包含导航栏和页脚
 */
export default function Layout() {
  const { isAuthenticated, userInfo, logout } = useContext(AuthContext);
  const { theme, toggleTheme } = useTheme();

  return (
    <div className="min-h-screen flex flex-col">
      {/* 顶部导航栏 */}
      <header className="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Link to="/" className="flex items-center">
                <i className="fa-solid fa-store text-indigo-600 dark:text-indigo-400 text-2xl mr-2"></i>
                <span className="text-xl font-bold text-gray-900 dark:text-white">校园二手交易平台</span>
              </Link>
            </div>

            <div className="hidden md:flex items-center space-x-6">
              <Link to="/" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                首页
              </Link>
              <Link to="/post-product" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                发布商品
              </Link>
              {isAuthenticated && (
                <>
                  <Link to="/cart" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                    <i className="fa-solid fa-cart-shopping mr-1"></i>购物车
                  </Link>
                  <Link to="/orders" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                    <i className="fa-solid fa-box mr-1"></i>订单
                  </Link>
                  {userInfo?.role === 'admin' && (
                    <Link to="/admin" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                      <i className="fa-solid fa-user-tie mr-1"></i>管理后台
                    </Link>
                  )}
                  {userInfo?.role === 'merchant' && (
                    <Link to="/merchant" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">
                      <i className="fa-solid fa-store mr-1"></i>商家中心
                    </Link>
                  )}
                </>
              )}
            </div>

            <div className="flex items-center">
              {isAuthenticated ? (
                <div className="ml-4 flex items-center md:ml-6">
                  <button
                    type="button"
                    className="flex items-center text-sm bg-gray-100 dark:bg-gray-700 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600"
                  >
                    <span className="sr-only">打开用户菜单</span>
                    <i className="fa-solid fa-user text-gray-600 dark:text-gray-300"></i>
                  </button>
                  <button
                    onClick={logout}
                    className="ml-2 px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600"
                  >
                    退出
                  </button>
                </div>
              ) : (
                <div className="ml-4 flex items-center md:ml-6">
                  <Link
                    to="/login"
                    className="mr-2 px-3 py-1 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
                  >
                    登录
                  </Link>
                  <Link
                    to="/register"
                    className="px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600"
                  >
                    注册
                  </Link>
                </div>
              )}
              <button
                onClick={toggleTheme}
                className="ml-2 p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none"
              >
                <i className={`fa-solid ${theme === 'light' ? 'fa-moon' : 'fa-sun'}`}></i>
              </button>
            </div>
          </div>
        </div>

        {/* 移动端导航菜单 */}
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <Link to="/" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700">
              首页
            </Link>
            <Link to="/post-product" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
              发布商品
            </Link>
            {isAuthenticated && (
              <>
                <Link to="/cart" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <i className="fa-solid fa-cart-shopping mr-1"></i>购物车
                </Link>
                <Link to="/orders" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <i className="fa-solid fa-box mr-1"></i>订单
                </Link>
                {userInfo?.role === 'admin' && (
                  <Link to="/admin" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i className="fa-solid fa-user-tie mr-1"></i>管理后台
                  </Link>
                )}
                {userInfo?.role === 'merchant' && (
                  <Link to="/merchant" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <i className="fa-solid fa-store mr-1"></i>商家中心
                  </Link>
                )}
                <button
                  onClick={logout}
                  className="w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <i className="fa-solid fa-right-from-bracket mr-1"></i>退出
                </button>
              </>
            )}
            {!isAuthenticated && (
              <>
                <Link to="/login" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  登录
                </Link>
                <Link to="/register" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  注册
                </Link>
              </>
            )}
          </div>
        </div>
      </header>

      {/* 主内容区 */}
      <main className="flex-1">
        <Outlet />
      </main>

      {/* 页脚 */}
      <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">校园二手交易平台</h3>
              <p className="text-gray-600 dark:text-gray-400">
                为大学生提供安全、便捷的二手交易服务，让闲置物品流动起来，共建绿色校园。
              </p>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">快速链接</h3>
              <ul className="space-y-2">
                <li>
                  <Link to="/" className="text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">首页</Link>
                </li>
                <li>
                  <Link to="/post-product" className="text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">发布商品</Link>
                </li>
                <li>
                  <Link to="/cart" className="text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">购物车</Link>
                </li>
                <li>
                  <Link to="/orders" className="text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">订单</Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">联系我们</h3>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-gray-500">
                  <i className="fa-brands fa-weixin text-2xl"></i>
                  <span className="sr-only">微信</span>
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-500">
                  <i className="fa-brands fa-weibo text-2xl"></i>
                  <span className="sr-only">微博</span>
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-500">
                  <i className="fa-solid fa-envelope text-2xl"></i>
                  <span className="sr-only">邮箱</span>
                </a>
              </div>
              <p className="mt-4 text-gray-600 dark:text-gray-400">
                <i className="fa-solid fa-phone mr-2"></i>客服电话: 123-4567-8910
              </p>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400">
            <p>&copy; {new Date().getFullYear()} 校园二手交易平台. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}